<template>
	<van-cell is-link title="规格参数" @click="toggleShow" icon="completed">查看详细</van-cell>
	<van-action-sheet v-model:show="show" title="规格参数" closeable style="height:80vh">
		<div class="params-list" v-if="params&&params.length>0">
			<div class="param-item" v-for="(item,i) in params" key="i">
				<div class="name">{{item.name}}</div><div class="value">{{item.value}}</div>
			</div>
		</div>
		<div class="params-list flex" style="justify-content: center;" v-else>
			<van-loading color="var(--van-primary-color)" size="2rem"/>
		</div>
		<div class="sheet-btn-wrap">
			<van-button type="primary" block round @click="toggleShow">关 闭</van-button>
		</div>
	</van-action-sheet>
</template>
<style lang="scss" scoped>
.params-list{
	height:calc(80vh - 98px - env(safe-area-inset-bottom));font-size:14px;overflow-x:hidden;overflow-y:auto;
	.param-item{
		display:flex; align-items: center; padding:10px 16px; justify-content: space-between; position:relative;
		.name{flex:1; color:var(--font-third-color);flex-shrink: 0;}
		.value{flex:3;text-align:right;}
		&::after {
			position: absolute; box-sizing: border-box; content: " "; pointer-events: none; right: 16px; bottom: 0; left: 16px;
			border-bottom: 1px solid var(--van-cell-border-color); transform: scaleY(.5);
		}
	}
}
.sheet-btn-wrap{
	--van-button-primary-background:var(--van-primary-color)
}
</style>
<script lang="ts" setup>
//props
const props = defineProps({
	params:{
		type:Array<any>,
	},
})
//data
const show = ref(false) //是否上拉展示规格参数
const toggleShow = () => {
	show.value = !show.value
};
</script>